<template>

  <section v-loading="loading" class="cms-body">
    <!-- 查询表单 -->
    <div class="cms-list-header">
      <el-row>
        <el-col :span="12" style="width: auto">
          <el-select v-model="params.isChecked" @change="goQuery">
            <el-option label="审核状态" value=''></el-option>
            <el-option label="等待审核" :value="'0'"></el-option>
            <el-option label="审核通过" :value="'1'"></el-option>
            <el-option label="审核不通过" :value="'2'"></el-option>
          </el-select>
        </el-col>
        <el-col :span="12" class="text-right" style="width: auto">
          <cms-input v-model="params.targetId" label="文章ID"></cms-input>
          <el-button @click="goQuery">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <section v-for="(item,index) in tableData" :key="index">
      <header class="header">
        <el-row>
          <el-col :span="12" class="title">
            <el-checkbox v-model="checks[index]" @change="check(index)"></el-checkbox>&nbsp;
            <span>[评论Id:{{item.id}}]</span>
            <span>[{{item.channelName}}]</span>{{item.title}}
          </el-col>
          <el-col :span="2" style="width: 10%;">
            <span class="contentId">文章ID：{{item.targetId}}</span>
          </el-col>
          <el-col :span="2">
            <el-button class="small-btn" @click="routerLink('/comment/itemList','list',item.id)" v-perms="'/comment/itemList'">{{item.replyNum}} 条回复
            </el-button>
          </el-col>
        </el-row>
      </header>
      <section class="container">
        <div class="content-container">
          <el-row>
            <el-col :span="18">
              <!-- 评论显示区域 -->
              <el-row v-show="item.commentDisplayDisabled">
                <el-col :span="3">
                  <div class="tip primy tip-right">
                    评论内容
                  </div>
                </el-col>
                <el-col :span="19">
                  <div class="content-textarea">
                    <span class="read-color" v-show="item.recommend">[推荐]</span>
                    {{item.text}}
                  </div>
                </el-col>
              </el-row>
              <!-- 修改评论框显示区域 -->
              <el-row class="reply comment" v-show="item.commentDisabled">
                <el-col :span="3">
                  <div class="tip primy tip-right">
                    评论内容
                  </div>
                </el-col>
                <el-col :span="19">
                  <div class="reply-textarea comment-textarea">
                    <el-input type="textarea" v-model="commentContent[index]" placeholder="请输入评论内容"></el-input>
                    <div class="btn-group">
                      <el-button class="small-btn submit" @click="submitComment(index,item.id)">提交
                      </el-button>
                      <el-button class="small-btn cancel" @click="cancelComment(index)">取消</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6" class="text-right">
              <p>
                <span class="gray">审核状态：</span>
                <span v-if="item.isChecked == 0" class="green-color">等待审核</span>
                <span v-else-if="item.isChecked == 1" class="read-color">审核通过</span>
                <span v-else-if="item.isChecked == 2" class="gray">审核不通过</span>
              </p>
            </el-col>
          </el-row>
        </div>
        <footer class="footer">
          <el-row>
            <el-col :span="12" class="gray" style="width: 60%;">
              <span style="color: #FFA500" @click="routerLink('/appUser/pageList','pageList',item.commentUserId)">评论者： {{item.nickName}}</span>
              <span>评论时间：{{item.createTime}}</span>
              <span>IP：{{item.ip}}</span>
            </el-col>
            <el-col :span="12" class="text-right" style="width: 40%;">
              <el-button class="small-btn" @click="goCheck(item.id,1)" v-perms="'/comment/checked'">审核通过</el-button>
              <el-button class="small-btn" @click="goCheck(item.id,2)" v-perms="'/comment/checked'">审核不通过</el-button>
              <el-button class="small-btn" @click="clickComment(index)" v-perms="'/comment/editText'">修改评论</el-button>
              <el-button class="small-btn" @click="deleteBatch($api.commentRemove,item.id)" v-perms="'/comment/remove'">
                删除
              </el-button>
            </el-col>
          </el-row>
        </footer>
      </section>
    </section>

    <!-- 表格底部 -->
    <div class="cms-list-footer">
      <div class="cms-left">
        <el-checkbox v-model="checks[tableData.length]" @change="check(-1)"></el-checkbox>&nbsp;&nbsp;

        <el-button :disabled="disabled" @click="goCheck(ids,1)" v-perms="'/comment/checked'">审核通过
        </el-button>
        <el-button :disabled="disabled" @click="goCheck(ids,2)" v-perms="'/comment/checked'">审核不通过
        </el-button>
        <el-button :disabled="disabled" @click="deleteBatch($api.commentRemove,ids)" v-perms="'/comment/remove'">批量删除
        </el-button>
      </div>
      <!-- cms分页组件 -->
      <cms-pagination :total="total" @change="getPages"></cms-pagination>
    </div>
  </section>
</template>
<script>
  import listMixins from '@/mixins/list'
  import axios from "axios";
  import {setBaseUrl} from '@/config.js'

  export default {
    mixins: [listMixins],
    data() {
      return {
        globalUrl: setBaseUrl(),
        params: {
          isChecked: '',
          targetId: '',
          pageNo: 1,
          pageSize: 10,
        },
        checks: [],
        replyContent: [],
        commentContent: [],
        commentTypes: [],
      }
    },
    methods: {
      //修改评论按钮点击事件
      clickComment(index) {
        this.tableData[index].commentDisabled = true;
        this.tableData[index].commentDisplayDisabled = false;
        this.commentContent[index] = this.tableData[index].text;
      },
      //修改评论中取消按钮点击事件
      cancelComment(index) {
        this.tableData[index].commentDisplayDisabled = true;
        this.tableData[index].commentDisabled = false;
      },
      //修改评论中提交按钮点击事件
      submitComment(index, commentId) {
        let content = this.commentContent[index];
        if (content == '' || typeof (content) == 'undefined') {
          this.errorMessage('请填写评论信息');
          return false;
        }
        this.loading = true;
        let param = {commentId: commentId, checked: this.tableData[index].checked, text: content};
        axios.post(this.$api.commentEditText, param).then(res => {
          this.loading = false;
          if (res.code == '200') {
            this.successMessage('修改评论成功');
            this.tableData[index].text = this.commentContent[index];
            this.tableData[index].commentDisabled = false;
            this.tableData[index].commentDisplayDisabled = true;
          }
        }).catch(err => {
          console.log(err);
          this.loading = false;
        });
      },
      goCheck(ids, status) {
        this.loading = true;
        axios.post(this.$api.commentChecked, {ids: ids, isChecked: status}).then(res => {
          this.loading = false;
          if (res.code == '200') {
            this.successMessage('操作成功');
            this.getTableData();
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      //查询
      goQuery() {
        this.getTableData();
      },
      getTableData: function () {
        this.loading = true;
        axios.post(this.$api.commentPageList, this.params).then(res => {
          console.log(res)
          this.loading = false;
          if (res.code == '200') {
            this.tableData = [];
            this.checks = [];
            this.disabled = true;
            this.total = res.totalCount;
            let commentList = res.body;
            for (let item of commentList) {
              item.commentDisabled = false;
              item.commentDisplayDisabled = true;
              this.checks.push(false)
            }
            this.checks.push(false);
            this.tableData = commentList;
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      //checkbox选中触发事件
      check(index) {
        if (index == -1) {
          if (this.checks[this.checks.length - 1]) {
            this.checks = this.checks.map(function (e) {
              return true;
            });
            this.disabled = false;
          } else {
            this.checks = this.checks.map(function (e) {
              return false;
            });
            this.disabled = true;
          }
        } else {
          let checkFlaseCount = 0;
          for (let i = 0; i < this.checks.length - 1; i++) {
            if (this.checks[i]) {
              checkFlaseCount++;
            }
          }
          if (this.checks[index]) {
            this.disabled = false;
            if (checkFlaseCount == this.checks.length - 1) {
              this.checks[this.checks.length - 1] = true;
            }
          } else {
            if (checkFlaseCount > 0) {
              this.disabled = false;
            } else {
              this.disabled = true;
            }
            this.checks[this.checks.length - 1] = false;
          }
        }
        let ids = [];
        for (let i = 0; i < this.checks.length - 1; i++) {
          if (this.checks[i]) {
            ids.push(this.tableData[i].id);
          }
        }
        this.ids = ids.join(',');

      },
    },
    created() {
      this.params.targetEntity = 'JcContent';
      this.getTableData();
    },
  };
</script>
<style>
  .container {
    width: 100%;
    padding: 20px 24px;
    border-bottom: 1px dashed #e7ecf3;
  }

  .content-container {
    min-height: 60px;
  }

  .header, .container, .gray {
    font-size: 14px;
  }

  .gray {
    display: inline-block;
  }

  .read-color {
    color: red;
  }

  .green-color {
    color: #29D785;
  }

  .small-btn {
    padding: 5px 8px;
    min-width: 50px;
  }

  .header {
    padding: 0px 24px;
    height: 50px;
    line-height: 50px;
    background-color: #F7F7F7;
    box-sizing: border-box;
  }

  .header .el-row {
    border-top: 1px #E7ECF3 solid;
  }

  .header .title {
    overflow: hidden;
    min-width: 300px;
  }

  .header .title a {
    color: #5C93BF;
  }

  .header .contentId {
    color: #acb5bb
  }

  .footer {
    margin-top: 20px;
  }

  .footer .gray span {
    margin-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .content-textarea {
    min-height: 50px;
    line-height: 30px;
  }

  .reply {
    margin-top: 30px;
  }

  .reply-textarea {
    position: relative;
    border: 1px #EEE9DD solid;
    border-radius: 4px;
  }

  .reply-textarea textarea {
    border: 0px;
    resize: none;
  }

  .reply-textarea .btn-group {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }

  .reply-textarea .btn-group span {
    color: #ffffff;
  }

  .reply-textarea .submit {
    background-color: #00AEFF;
  }

  .reply-textarea .cancel {
    background-color: #C7C7C7;
  }

  .comment {
    margin-top: 0px;
  }

  .comment-textarea {
    border: 1px #E7ECF3 solid;
  }
</style>
